<template>
  <top-nav></top-nav>
  <body>
    <div class="search-box">
      <a-input-search
        v-model:value="value"
        placeholder="请输入文件名，类型，标签，或者内容"
        enter-button
        size='large'
        @search="onSearch($event)"
      />
    </div>
    <div class="content-container">
      <div v-if="searchResult.length !== 0">
        123
        <ul>
          <li v-for="(fileInfo, index) in searchResult" :key="index">
            <div>{{ fileInfo.fileName }}</div>
            <div>{{ fileInfo.fileContent }}</div>
            <a-divider />
          </li>
        </ul>
      </div>
    </div>
  </body>
</template>

<script>
import topNav from '@/components/top-nav.vue'
import { ref, watch } from 'vue'
import { search } from '@/api/index'
import { message } from 'ant-design-vue'

export default {
  data() {
    return {
      value: '',
      searchResult: [],
      fileData: [],
    }
  },

  components:{
      topNav,
  },

  setup() {
    const pageSize = ref(20)
    const current = ref(1)
    const onShowSizeChange = (current, pageSize) => {
      console.log(current, pageSize);
    }
    watch(pageSize, () => {
      console.log('pageSize', pageSize.value);
    })
    watch(current, () => {
      console.log('current', current.value);
    })
    return {
      pageSize,
      current,
      onShowSizeChange,
    }
  },

  mounted() {
    this.getFileData()
  },

  computed: {
    // 根据文件后缀展示图标
    iconUrl() {
      const imgType = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      const vidType = ['mp4', 'mov', 'avi', 'mkv', 'mpeg', 'wmv', 'mpg', 'rmvb', 'rm', 'ts', 'dat']
      let imgIn = imgType.indexOf(this.fileInfo.fileType)
      let vidIn = vidType.indexOf(this.fileInfo.fileType)
      if (!imgIn === -1) {
          return require('@/assets/images/img.png')
      } else if(!vidIn === -1) {
          return require('@/assets/images/video.png')
      } else {
          return require(`@/assets/images/${this.fileInfo.fileType}.png`)
      }
    }
  },

  methods: {
    getFileData() {

    },

    onSearch() {
      var that = this
      that.searchResult = []
      search({'fileContent' : this.value}).then(response => {
        console.log(response.data.code)
        if(response.data.code == 200){
          that.searchResult = response.data.data.data
          console.log(that.searchResult)
        }else{
          message.error('查询数据失败')
        }
      })
    },

    download() {
     
    },

    downloadFile(data) {
      if (!data) {
          return
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', 'fileInfo.fileName');
      document.body.appendChild(link);
      link.click()
    },

    preview() {
      let previewUrl = ''
      previewUrl = 'http://' + this.fileInfo.filePath
      return previewUrl
    }
  }
}
</script>